Type directions
seven pairings · same content · pick one

All seven use the same content — headline, structural label, body paragraph, inline "code token". No monospace in body copy. Inline code is set in a heavier weight of the same family, which is how editorial typography actually handles it (see The New York Times, Bloomberg, WIRED print). The one place a tiny mono is acceptable is in the actual code block on the code-example section — that's legit, since it's a screenshot of a file.

Option A

Editorial modernist

"Kinfolk meets a whitepaper."
Display
Instrument Serif
UI + body
Inter Tight
Mono (code only)
Geist Mono
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

PRIMITIVES3
RENDER LOOPS1
BROWSERS IN PROOF PATH0
DEMOS PLANNED6
Option B

Warm literary

"A book you want to read in bed."
Display
Fraunces (opsz 144)
UI + body
DM Sans
Character
Humanist · warmer
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

PRIMITIVES3
RENDER LOOPS1
BROWSERS IN PROOF PATH0
DEMOS PLANNED6
Option C

Grotesk only

"Linear, Vercel — modern software."
Display
Inter Tight 700
UI + body
Inter Tight 400/500
Character
No serif anywhere
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

PRIMITIVES3
RENDER LOOPS1
BROWSERS IN PROOF PATH0
DEMOS PLANNED6
Option D

Scholarly technical

"Stripe Press. Technical but readable."
Display
Source Serif 4 (opsz 60)
UI + body
IBM Plex Sans
Character
Open-source serious
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

PRIMITIVES3
RENDER LOOPS1
BROWSERS IN PROOF PATH0
DEMOS PLANNED6
Option E

Newsreader — all serif

"Long-read on an old blog. Pure editorial."
Display
Newsreader (opsz 72)
Body
Newsreader (opsz 18)
UI labels only
Inter Tight
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

PRIMITIVES3
RENDER LOOPS1
BROWSERS IN PROOF PATH0
DEMOS PLANNED6
Option F

Space Grotesk brutalist

"Mek.gallery, Are.na, Dia browser."
Display
Space Grotesk 700
UI + body
Space Grotesk 400/500
Character
Tight geometric quirks
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

PRIMITIVES3
RENDER LOOPS1
BROWSERS IN PROOF PATH0
DEMOS PLANNED6
Option G

Classic Garamond

"Oxford essay. Quiet confidence."
Display
EB Garamond 500
Body
EB Garamond 400
UI labels only
Inter Tight
§01 · THE STACK
A small stack for UI code that can be proven, not just shipped.

Three primitives that stack. pretext measures text without a single DOM read. vibescript runs one render loop with one state object. freerange proves layout facts from source — so callers of measureCaption know by construction that the result fits its width.

PRIMITIVES3
RENDER LOOPS1
BROWSERS IN PROOF PATH0
DEMOS PLANNED6
My pick, for what it's worth

D (Source Serif + IBM Plex Sans) or A (Instrument Serif + Inter Tight). Both let the serif do the "this is a considered document" work while the sans handles anything structural or dense. D is more technical-serious (Stripe Press energy); A is more contemporary-magazine. E (Newsreader everywhere) is the bravest choice — all-serif reads as very confident editorial, but body copy in a serif at 15–16px needs generous leading to not feel dense.

Skip F unless we want to lean fully into the brutalist side and drop the ethereal atmosphere. Space Grotesk + pale gradient is a mismatch.

Tell me a letter and I'll rebuild the manifesto on it.